<template>
  <div class="trees-container" ref="hammers">
    <div class="trees" :class="{horizontal, collapsable}">
      <trees-node
        :data="data"
        :props="props"
        :horizontal="horizontal"
        :label-width="labelWidth"
        :collapsable="collapsable"
        :render-content="renderContent"
        :label-class-name="labelClassName"
        :point="point"
        @on-expand="$emit('on-expand', $event)"
        @on-node-click="(e, data,id,check) => {$emit('on-node-click', e, data,id,check)}"
      ></trees-node>
    </div>
  </div>
</template>

<script>
import render from "./node";
export default {
  name: "trees",
  data(){
    return{
         hammers: null
    }
  },
  components: {
    treesNode: {
      render,
      functional: true
    }
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    props: {
      type: Object,
      default: () => ({
        label: "label",
        expand: "expand",
        children: "children",
        check: "check",
        id:"id"
      })
    },
    horizontal: Boolean,
    collapsable: Boolean,
    renderContent: Function,
    labelWidth: [String, Number],
    labelClassName: [Function, String],
    point: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  methods: {
    hammersFun() {
    
      this.hammers = new Hammer(this.$refs.hammers);
      this.hammers.get("pan").set({
        direction: Hammer.DIRECTION_ALL
      });
      this.hammers.on("panstart", (event)=> {
        var left = this.$refs.hammers.offsetLeft;
        var tp = this.$refs.hammers.offsetTop;
        this.hammers.on("panmove", (event)=> {

          this.$refs.hammers.style.left = left + event.deltaX + "px";
          this.$refs.hammers.style.top = tp + event.deltaY + "px";
        });
      });
      this.hammers.get("pinch").set({
        enable: true,
        pointers: 2
      });
      var scaleIndex;
      var transform = {
        scale: ""
      };
      this.hammers.on("pinchstart pinchmove", e => {
        if (e.type == "pinchstart") {
          scaleIndex = transform.scale || 1;
        }
        transform.scale = scaleIndex * e.scale;
        if (transform.scale > 3) {
          transform.scale = 3;
          return;
        }
        if (transform.scale < 0.5) {
          transform.scale = 0.5;
          return;
        }
        // this.$refs.hammers.innerHTML = scaleIndex + "//" + transform.scale + "//" + e.scale

        this.$refs.hammers.style.transform =
          "scale(" + scaleIndex * e.scale + ")";
      });
    }
  },
  mounted() {
    this.hammersFun()
  }
};
</script>

<style lang="less">
@import "./style.less";
</style>